/*
 * Copyright 1999-2018 Alibaba Group Holding Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *      http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from 'react';
import PropTypes from 'prop-types';
import {Button, ConfigProvider, Dialog, Grid} from '@alifd/next';

import './index.scss';

const {Row, Col} = Grid;

@ConfigProvider.config
class DiffEditorDialog extends React.Component {
    static displayName = 'DiffEditorDialog';

    static propTypes = {
        locale: PropTypes.object,
    };

    static propTypes = {
        publishConfig: PropTypes.func,
    };

    constructor(props) {
        super(props);
        this.diffeditor = React.createRef();
        this.state = {
            dialogvisible: false,
        };
    }

    openDialog(letfcode, rightcode) {
        this.setState({
            dialogvisible: true,
        });
        setTimeout(() => {
            this.createDiffCodeMirror(letfcode, rightcode);
        });
    }

    closeDialog() {
        this.setState({
            dialogvisible: false,
        });
    }

    createDiffCodeMirror(leftCode, rightCode) {
        const target = this.diffeditor.current;
        target.innerHTML = '';
        this.diffeditor = window.CodeMirror.MergeView(target, {
            value: leftCode || '',
            readOnly: true,
            origLeft: null,
            orig: rightCode || '',
            lineNumbers: true,
            mode: this.mode,
            theme: 'xq-light',
            highlightDifferences: true,
            connect: 'align',
            collapseIdentical: false,
        });
    }

    confirmPub() {
        this.closeDialog();
        this.props.publishConfig();
    }

    render() {
        const {locale = {}} = this.props;
        const footer = (
            < div >
            {' '}
            < Button
        type = "primary"
        onClick = {this.confirmPub.bind(this)} >
            {locale.publish}
            < /Button>
            < /div>
    )
        ;
        return (
            < div >
            < Dialog
        title = {locale.contents}
        style = {
        {
            width: '80%'
        }
    }
        visible = {this.state.dialogvisible}
        footer = {footer}
        onClose = {this.closeDialog.bind(this)}
            >
            < div
        style = {
        {
            height: 400
        }
    }>
    <
        div >
        < Row >
        < Col
        style = {
        {
            textAlign: 'center'
        }
    }>
        {
            locale.currentArea
        }
    <
        /Col>
        < Col
        style = {
        {
            textAlign: 'center'
        }
    }>
        {
            locale.originalValue
        }
    <
        /Col>
        < /Row>
        < /div>
        < div
        style = {
        {
            clear: 'both', height
        :
            480
        }
    }
        ref = {this.diffeditor}
        />
        < /div>
        < /Dialog>
        < /div>
    )
        ;
    }
}

export default DiffEditorDialog;
